/* eslint-disable react/prop-types */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { navigate } from 'utils/router';
import * as actions from '../actions/index';
import CommitDetail from 'components/commitDetail';
import track, { enterPage } from 'utils/track';
import utils from 'utils';
import './root.scss';

class ProjectCommitDetail extends Component {
  componentDidMount() {
    enterPage('Repo-Commit');
  }

  closeCommitDetail = () => {
    navigate(
      `${window.location.origin}/${window.FORCE.pathResource.fullPath}/commits/${this.props.curCommitId}`,
    );
  };

  renderContent = () => {
    const { isShowCommitDetail } = this.props;
    const showBuildId = utils.getUrlSearchParam('show_build');
    return (
      <>
        {isShowCommitDetail ? (
          <CommitDetail
            commitId={this.props.curCommitId}
            onChange={this.closeCommitDetail}
            showBuildId={showBuildId}
            genWatermarkimage={this.props.genWatermarkimage}
            // 所属分支不展示图标
            noBranchIcon
            associatePanelOptions={{
              associateCardTitle: <div style={{ width: 90 }}>关联资源</div>,
              noTriggerText: true,
              isDropdown: true,
              onTrackByClickAdd: () => {
                track({
                  action: 'associate_work_item',
                  page: 'Repo-Commit',
                  type: '',
                  control: '',
                });
              },
              associatePanelLabel: (
                <div
                  style={{
                    width: 90,
                    height: 36,
                    lineHeight: '36px',
                    fontSize: 14,
                    color: '#8b8b8b',
                  }}
                >
                  关联资源
                </div>
              ),
            }}
          />
        ) : null}
      </>
    );
  };

  render() {
    return <div className="project-pages-project-commit-detail">{this.renderContent()}</div>;
  }
}

export default connect(
  (state) => ({
    ...state.project.projectCommitDetail,
    genWatermarkimage: state.project.root.genWatermarkimage,
  }),
  (dispatch) => bindActionCreators(actions, dispatch),
)(ProjectCommitDetail);
